<template>
    <div>
        <headNav title="班费"></headNav>
        <div class="moneyTit">
            <div class="moneyLeft">
                <p>{{gradeName}}{{className}} 班费余额</p>
                <div class="monB" v-if="classFareCurrency">
                    <span class="monNumber" v-if="classFareCurrency.classFareCurrency">{{classFareCurrency.classFareCurrency.currency}}元</span>
                    <span class="monBtn" @click="tiExpense" v-if="isShow">提取</span>
                </div>
            </div>
            <div class="moneyRight" v-if="isShow">
                <span class="shouBtn" @click="takeExpense">收取班费</span>
                <img @click="clickSet" src="@/assets/img/classExpense/setImg.png" alt="">
            </div>
        </div>
        <div class="monTab">
            <ul>
                <li :class="{active:current==0}" @click="changeTab(0)">收款记录<i></i></li>
                <li :class="{active:current==1}" @click="changeTab(1)">提取记录<i></i></li>
            </ul>
        </div>
        <div class="tableContent">
             <!-- 收款记录 -->
            <div class="exList" v-if="current==0" v-loadmore="loadmore2" key="55">
                <ul>
                    <li v-for="(item,index) in shouListData" :key="index">
                        <div class="listB">
                            <div class="listTit">
                                <img v-if="item.collectionState == 1" src="@/assets/img/classExpense/type-1.png" alt="">
                                <img v-if="item.collectionState == 2" src="@/assets/img/classExpense/type-2.png" alt="">
                                <span>{{item.name}}</span>
                            </div>
                            <div class="liItem">发起时间：{{item.createTime}}</div>
                            <div class="liItem">到期时间：{{item.expiresTime}}</div>
                            <div class="liItem">收费：{{item.currency}}元/人</div>
                            <div class="liItem">备注：{{item.remark}}</div>
                        </div>
                        <div class="listBottom">
                            <div class="jiaoM">已交纳：{{item.totalPayCurrency}}元</div>
                            <div class="shouP"><span>收取情况：</span><label @click="showModel(item)">{{item.totalPayCount}}/{{item.totalCollectionCount}}人 > </label></div>
                        </div>
                    </li>
                </ul>
                <div class="load-p">
                    <load-more v-if="isMore" :tip="'正在加载'"></load-more>
                    <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                </div>
            </div>
            <!-- 提取记录 -->
            <div class="exList"  v-if="current==1" v-loadmore="loadmore" key="99">
                <ul>
                    <li v-for="(item,index) in tiListData" :key="index" style="height:4rem">
                        <div class="listB">
                            <div class="listTit">
                                <span class="shengTime">申请时间：{{item.createTime}}</span>
                            </div>
                            <div class="liItem itemC">申请人：{{item.createName}}</div>
                            <div class="liItem itemC">提取金额：{{item.currency}}元</div>
                            <div class="liItem itemC" v-if="item.completeTime">结算时间：{{item.completeTime}}</div>
                            <div class="liItem itemC" v-else>结算时间：未结算</div>
                            <div class="liItem itemC">结算方式：{{item.cashType == 1 ? '支付宝' : '微信'}}</div>
                            <div class="liItem itemC">结算账号：{{item.account}}</div>
                        </div>
                        <img v-if="item.cashState == 1" class="jieIcon" src="@/assets/img/classExpense/jie-1.png" alt="">
                        <img v-if="item.cashState == 2" class="jieIcon" src="@/assets/img/classExpense/jie-2.png" alt="">
                        <img v-if="item.cashState == 3" class="jieIcon" src="@/assets/img/classExpense/zuofei.png" alt="">
                    </li>
                </ul>
                <div class="load-p">
                    <load-more v-if="isMore" :tip="'正在加载'"></load-more>
                    <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
                </div>
            </div>
        </div>
        
        <!-- 详情弹窗 -->
        <detail-dialog v-if="modelShow" :modelShow="modelShow" @hide='delModel' :listData="detailData" :isShow="isShow"></detail-dialog>
        <!-- 收取班费弹窗 -->
        <div v-if="isExpense" class="model">
            <div class="box">
               <p class="titP">收取班费</p>
               <div class="claList">
                   <ul>
                       <li class="claName"><span class="claSpan">班费名目：</span><input v-model.trim="feeName" type="text"></li>
                       <li class="claM">
                           <span class="claSpan">收取金额：</span>
                           <counter ref="shouMoney" :precision="2"></counter>
                           <span>元/人</span>
                       </li>
                       <li class="claM">
                          <span class="claSpan">备注：</span> 
                          <textarea class="claText" cols="30" rows="10" v-model.trim="feeRemark"></textarea>
                       </li>
                       <li class="claM">
                           <span class="claSpan">有效期：</span>
                           <counter ref="validDay" :precision="0"></counter>
                           <span>天</span>
                       </li>
                   </ul>
               </div>
               <div class="twoBtn">
                   <div class="confirm" @click="confirmEx">确定</div>
                   <div class="cancel" @click="cancelEx">取消</div>
               </div>
            </div>
        </div>
        <!-- 提取班费 -->
        <div v-if="isTiqu" class="model">
            <div class="box tiHeight">
               <p class="titP">提取班费</p>
               <div class="claList">
                   <ul>
                       <li class="claM">
                           <span class="claSpan">提取金额：</span>
                           <!-- <counter ref="count" :defaultVal='tiNumber'></counter> -->
                           <counter ref="count" :precision="2"></counter>
                       </li>
                   </ul>
               </div>
               <div class="twoBtn">
                   <div class="confirm" @click="TiConfirmEx">确定</div>
                   <div class="cancel" @click="TiCancelEx">取消</div>
               </div>
            </div>
        </div>
        <!-- 确认提取班费 -->
        <div v-if="confirmTi" class="model">
            <div class="box tiHeight2">
               <div class="conText">
                   <!-- <img src="@/assets/img/classExpense/type-6.png" alt=""> -->
                   <div class="tishi">
                       <span class="shengqing">申请提取班费<label>{{tiNumber}}</label>元至</span>
                       <span class="zhanghao">{{classFareCurrency.cashType == 1 ? '支付宝' : '微信'}} {{classFareCurrency.account}}</span>
                   </div>
               </div>
               <div class="twoBtn">
                   <div class="confirm" @click="getCashCurrency">确定</div>
                   <div class="cancel" @click="cancelTi">取消</div>
               </div>
            </div>
        </div>
        <!-- 设置弹窗 -->
        <set-dialog :setModel="setModel" v-if="setModel" @hide='hideSet'></set-dialog>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import counter from '@/components/counter'
import setDialog from './setDialog'
import detailDialog from './detailDialog'
import { LoadMore} from 'vux'
export default {
    name:'expenseList',
    components: {
        headNav,
        counter,
        setDialog,
        detailDialog,
        LoadMore
    },
    computed: {
        gradeName () {
            return this.$store.state.user.gradeName
        },
        className () {
            return this.$store.state.user.className
        },
        schoolId () {
            return this.$store.getters['user/schoolId']
        },
        gradeId () {
            return this.$store.getters['user/gradeId']
        },
        classId () {
            return this.$store.getters['user/classId']
        },
        loginUserId () {
            return this.$store.getters['user/loginUserId']
        }
    },
    data() {
        return {
            current:0,
            modelShow:false,
            isExpense:false,
            isTiqu:false,
            tiNumber:0,
            confirmTi:false,
            setModel:false,
            classFareCurrency:{},
            shouListData: [],
            tiListData: [],
            pageIndex:0,
            pageSize:3,
            isMore:true,
            // 收取班费
            feeName:'',
            feeCurrency:'',
            feeRemark:'',
            feeExpiresDay:'',
            detailData:'',
            isShow:false
        }
    },
    mounted(){
        this.getStatistics()
        this.getShouList()
    },
    methods:{
        showModel(item){
            this.modelShow = true
            this.detailData = item
        },
       delModel(){
           this.modelShow = false
       },
       takeExpense(){
           this.isExpense = true
       },
       cancelEx(){
           this.isExpense = false
           this.clearCollectFee()
       },
       confirmEx(){
        //    this.feeCurrency = this.$refs.shouMoney.countNum ? (this.$refs.shouMoney.countNum).toString().replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1') : ''
        //    this.feeExpiresDay = this.$refs.validDay.countNum ? (this.$refs.validDay.countNum).toString().replace(/[^\d]/g,'') : ''
        this.feeCurrency = this.$refs.shouMoney.countNum
           this.feeExpiresDay = this.$refs.validDay.countNum
           this.collectFee()
       },
       changeTab(num){
           this.current = num
           this.isMore = true
            this.pageIndex = 0
           if(num == 0){
                this.shouListData = []
              this.getShouList()
           }else{
               this.tiListData = []
               this.getTiList()
           }
       },
       tiExpense(){
        //    if(!this.classFareCurrency.classFareCurrency.currency){
        //      this.$vux.toast.text('余额不足', 'middle')
        //      return
        //    }
           this.isTiqu = true
       },
       TiCancelEx(){
           this.isTiqu = false
       },
       TiConfirmEx(){
           if(!this.$refs.count.countNum || this.$refs.count.countNum == '0.0' || this.$refs.count.countNum == '0.00'){
               this.$vux.toast.text('提取金额不能为空', 'middle')
               return
           }
            // this.tiNumber = (this.$refs.count.countNum).toString().replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
            this.tiNumber = this.$refs.count.countNum
           this.confirmTi = true
       },
       cancelTi(){
           this.confirmTi = false
       },
       hideSet () {
          this.setModel = false
          this.getStatistics()
       },
       clickSet () {
          this.setModel = true
       },
    //    验证
    //  accountManageList () {
    //         this.$store.dispatch('classFee/ChekClassFareAccountManageList', {schoolId: this.schoolId}).then(res => {
    //             this.getStatistics()
    //         })
    //     },
    //    获取班费余额
      getStatistics () {
          var params = {
                SchoolId : this.schoolId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                PageNum: 1,
                PageSize: 1
            }
            this.$store.dispatch('classFee/GetStatistics', params).then( res => {
                this.classFareCurrency = res.items[0]
                if(this.classFareCurrency){
                    if(this.classFareCurrency.classFareChargeTeacherUserId == this.loginUserId){
                        this.isShow = true
                    }
                }
                
            })
      },
    //   收款记录recordCollectionClassFare
    loadmore2 () {
        console.log('loadmore2')
        // debugger
        this.getShouList()
        },
      getShouList(){
          if(!this.isMore){
                return
            }
          this.pageIndex++
         var params = {
                SchoolId : this.schoolId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                PageNum: this.pageIndex,
                PageSize: this.pageSize
            }
            this.$store.dispatch('classFee/RecordCollectionClassFare', params).then( res => {
                if(res.items.length < this.pageSize){
                        this.isMore = false
                    }
                this.shouListData = this.shouListData.concat(res.items)
            })
      },
    //   提取记录RecordCashClassFare
    loadmore () {
         console.log('loadmore')
        // debugger
            this.getTiList()
        },
      getTiList(){
          if(!this.isMore){
                return
            }
            this.pageIndex++
            var params = {
                SchoolId : this.schoolId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                PageNum: this.pageIndex,
                PageSize: this.pageSize
            }
            this.$store.dispatch('classFee/RecordCashClassFare', params).then( res => {
                if(res.items.length < this.pageSize){
                        this.isMore = false
                    }
                this.tiListData = this.tiListData.concat(res.items)
            })
      }, 
    //   收取班费 CollectionClassFare
       collectFee(){
           if(!this.checkCollectFee()){
               return
           }
          var params = {
                SchoolId : this.schoolId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                name: this.feeName,
                currency: this.feeCurrency,
                remark: this.feeRemark,
                expiresDay: this.feeExpiresDay
            }
            this.$store.dispatch('classFee/CollectionClassFare', params).then(res => {
                this.isExpense = false
                this.getStatistics()
                 this.isMore = true
                this.pageIndex = 0
                this.shouListData = []
                this.getShouList()
                this.clearCollectFee()
            }).catch(res => {
                this.isExpense = false
                this.clearCollectFee()
            })
       },
    //    清除收取班费数据
       clearCollectFee(){
           this.feeName = ''
           this.feeCurrency = ''
           this.feeRemark = ''
           this.feeExpiresDay = ''
       },
       checkCollectFee(){
           if(!this.feeName || this.feeName.length > 20){
               this.$vux.toast.text('班费明目不能为空且字数不能超过20', 'middle')
               return false
           }
           if(!this.feeCurrency || this.feeCurrency == '0.0' || this.feeCurrency == '0.00'){
               this.$vux.toast.text('收取金额不能为空', 'middle')
               return false
           }
           if(!this.feeRemark || this.feeRemark.length > 100){
               this.$vux.toast.text('备注不能为空且字数不能超过100', 'middle')
               return false
           }
           if(!this.feeExpiresDay){
               this.$vux.toast.text('有效期不能为空', 'middle')
               return false
           }
           return true
       },
    //    提取班费 CashCurrency
     getCashCurrency(){
          var params = {
                SchoolId : this.schoolId,
                GradeId: this.gradeId,
                ClassId: this.classId,
                cashCurrency: this.tiNumber
            }
            this.$store.dispatch('classFee/CashCurrency', params).then(res => {
                this.$vux.toast.text('申请成功', 'middle')
                this.confirmTi = false
                this.isTiqu = false
                this.getStatistics()
                this.isMore = true
                this.pageIndex = 0
                this.tiListData = []
                this.getTiList()
            }).catch(res => {
                this.confirmTi = false
            })
       },
    }
}
</script>
<style src="./css/classFee.css" scoped></style>
<style scoped>
.tableContent{
   height: calc(100% - 3.5rem);
}
.exList{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.load-p{
    padding: 1rem 0 0 0;
}
</style>
